<template>
  <div>
    <el-table :data = 'list.children' border height = '690px' stripe>
      <el-table-column prop = "name" label = "铭文名称"></el-table-column>
      <el-table-column prop = "icon" label = "铭文图标">
        <template slot-scope="scope">
          <img :src="$upload+'/'+scope.row.icon" style="height:3rem;width:3rem">
        </template>
      </el-table-column>
      <el-table-column label = "铭文属性">
        <template slot-scope="scope">
          <div v-if = "Number(scope.row.descript.Physical_attack) !== 0">物理攻击：+{{scope.row.descript.Physical_attack}}</div>
          <div v-if = "Number(scope.row.descript.Attack_speed) !== 0">攻击速度：+{{scope.row.descript.Attack_speed}}%</div>
          <div v-if = "Number(scope.row.descript.Physical_vampire) !== 0">物理吸血：+{{scope.row.descript.Physical_vampire}}%</div>
          <div v-if = "Number(scope.row.descript.Spell_penetration) !== 0">法术穿透：+{{scope.row.descript.Spell_penetration}}</div>
          <div v-if = "Number(scope.row.descript.Maximum_life) !== 0">最大生命：+{{scope.row.descript.Maximum_life}}</div>
          <div v-if = "Number(scope.row.descript.Spell_defense) !== 0">法术防御：+{{scope.row.descript.Spell_defense}}</div>
          <div v-if = "Number(scope.row.descript.Physical_penetration) !== 0">物理穿透：+{{scope.row.descript.Physical_penetration}}</div>
          <div v-if = "Number(scope.row.descript.Crit_chance) !== 0">暴击几率：+{{scope.row.descript.Crit_chance}}%</div>
          <div v-if = "Number(scope.row.descript.Spell_attack) !== 0">法术攻击：+{{scope.row.descript.Spell_attack}}</div>
          <div v-if = "Number(scope.row.descript.Spell_vampire) !== 0">法术吸血：+{{scope.row.descript.Spell_vampire}}%</div>
          <div v-if = "Number(scope.row.descript.Physical_defense) !== 0">物理防御：+{{scope.row.descript.Physical_defense}}</div>
          <div v-if = "Number(scope.row.descript.Healing_every_five_seconds) !== 0">每五秒回血：+{{scope.row.descript.Healing_every_five_seconds}}</div>
          <div v-if = "Number(scope.row.descript.Moving_speed) !== 0">移动速度：+{{scope.row.descript.Moving_speed}}%</div>
          <div v-if = "Number(scope.row.descript.Cooldown_reduction) !== 0">冷却缩减：+{{scope.row.descript.Cooldown_reduction}}%</div>
          <div v-if = "Number(scope.row.descript.Crit_effect) !== 0">暴击效果：+{{scope.row.descript.Crit_effect}}%</div>
          <div v-if = "Number(scope.row.descript.Max_mana) !== 0">最大法力：+{{scope.row.descript.Max_mana}}</div>
          <div v-if = "Number(scope.row.descript.Blue_every_five_seconds) !== 0">每五秒回蓝：+{{scope.row.descript.Blue_every_five_seconds}}</div>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="280">
        <template slot-scope="scope">
          <el-tooltip content="编辑该铭文" placement="top">
            <el-button type="primary" @click="edit(scope.row)" style="margin-left:20%;margin-right:40px"><i class = "el-icon-edit"></i></el-button>
          </el-tooltip>
          <el-tooltip content="删除该铭文" placement="top">
            <el-button type="primary" @click="remove(scope.row)"><i class = "el-icon-delete-solid"></i></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: ['list'],
  methods: {
    async remove (row) {
      this.$confirm(`是否确定删除铭文?"${row.name}"`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$http.post('rest/Insc/delete', { _id: this.list._id, index: row._id }).then(res => {
          if (res.status !== 200) {
            return this.$message.error('删除铭文失败！')
          }
          this.$store.commit('UpdataInsc', res.data)
          this.$message.success('删除铭文成功！')
        })
      })
    },
    edit (row) {
      window.sessionStorage.setItem('activePath', '/inscription/create')
      this.$router.push(`/inscription/edit/${row._id}`)
    }
  }
}
</script>

<style scoped>
img{
  margin-left: 5px;
}
</style>
